<link rel="stylesheet" href="../static/css/style.css">
<link rel="stylesheet" href="../static/css/styleoneadd.css">
<link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
<link rel="stylesheet" href="../static/plugins/bootstrap-3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../static/plugins/bootstrap-3.3.7/css/bootstrap.min.css">
<style>
    body{
        background-color: #f2f2f2 !important;
    }
    .layui-tab-brief>.layui-tab-title .layui-this{
        color: #34C0E3 !important;
    }
    .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after{
        border-bottom: 2px solid #34C0E3 !important;
    }
</style>
    <!-- 内容主体区域 -->
<div class="layui-fluid-pad">
    <div class="layui-col-md12">
        <div class="layui-card order-margin2">
            <div class="layui-card-header">统计报表</div>
            <div class="layui-card-body">
                <div class="layui-row layui-pad15">

                        <div class=" layui-col-lh">
                            <div class="layui-tab layui-tab-brief layui-sx" lay-filter="docDemoTabBrief">
                                <ul class="layui-tab-title">
                                    <li class="layui-this">个人体检统计</li>
                                    <li>团队体检统计</li>
                                    <li>问卷增项统计</li>
                                </ul>
                                <div class="layui-tab-content" style="height: 100px;">
                                    <!--内容1-->
                                        <div class="layui-tab-item layui-show">
                                            <div class="layui-row layui-col-space15">
                                                <div class="layui-col-md3">
                                                    <select class="form-control" lay-ignore>
                                                        <option>苏州第一人民医院</option>
                                                        <option value="0">苏州第一人民医院35t</option>
                                                        <option value="1">苏州第一人民医院565</option>
                                                        <option value="2">苏州第一人民医院65</option>
                                                    </select>
                                                </div>
                                                <div class="layui-col-md3">
                                                    <div class="layui-row">
                                                        <div class="layui-col-md12 layui-order-flexs">
                                                            <input type="text" class="form-control layui-gd-widths" placeholder="时间" id="test1">
                                                            &nbsp;&nbsp;至&nbsp;&nbsp;
                                                            <input type="text" class="form-control layui-gd-widths" placeholder="时间" id="test2">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="layui-col-md1">
                                                    <button class="layui-btn layui-t-h">筛选</button>
                                                </div>
                                            </div>
                                            <div class="layui-row">
                                                <div class="layui-col-md3">销售金额：5860</div>
                                            </div>
                                            <div class="layui-row">
                                                <div class="layui-col-md7">
                                                    <div id="main1" style="width: 100%;height:300px;"></div>
                                                </div>
                                            </div>
                                            <div class="layui-row">
                                                <div class="layui-col-md7">
                                                    <div id="main2" style="width: 100%;height:300px;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--内容1end-->
                                    <div class="layui-tab-item">
                                        22
                                    </div>
                                    <div class="layui-tab-item">内容3</div>
                                </div>
                            </div>
                        </div>

                </div>

            </div>
        </div>
    </div>
</div>


<script src="../static/js/jquery.min.js"></script>
<script src="../static/plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="../static/plugins/layui/layui.js"></script>
<!--<script src="../static/js/echarts.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
<script src="../static/js/app/consts/consts.js"></script>
<script>
    layui.use(['jquery','form','element','laydate','layer'], function(){
        var form = layui.form;
        var element = layui.element;
        var laydate = layui.laydate;
        var laypage = layui.laypage;
        var $ = layui.jquery;
        layer.msg(developingMsg);
        //监听提交
        // form.on('submit(formDemo)', function(data){
        //     layer.msg(JSON.stringify(data.field));
        //     return false;
        // });
     // 日期
        laydate.render({
            elem: '#test1' //指定元素
            ,theme: '#34C0E3'
        });
        laydate.render({
            elem: '#test2' //指定元素
            ,theme: '#34C0E3'
        });
        laydate.render({
            elem: '#test3' //指定元素
            ,theme: '#34C0E3'
        });
        laydate.render({
            elem: '#test4' //指定元素
            ,theme: '#34C0E3'
        });
    });
</script>
<!--趋势图-->
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var myChart3 = echarts.init(document.getElementById('main3'));
    var myChart4 = echarts.init(document.getElementById('main4'));

    // 指定图表的配置项和数据
    var  option1 = {
        xAxis: {
            type: 'category1',
            data: ['2018-5-1', '2018-5-2', '2018-5-3', '2018-5-4', '2018-5-5', '2018-5-6', '2018-5-7']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
    var  option2 = {
        xAxis: {
            type: 'category2',
            data: ['2018-5-1', '2018-5-2', '2018-5-3', '2018-5-4', '2018-5-5', '2018-5-6', '2018-5-7']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
    var  option3 = {
        xAxis: {
            type: 'category3',
            data: ['2018-5-1', '2018-5-2', '2018-5-3', '2018-5-4', '2018-5-5', '2018-5-6', '2018-5-7']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
    var  option4 = {
        xAxis: {
            type: 'category4',
            data: ['2018-5-1', '2018-5-2', '2018-5-3', '2018-5-4', '2018-5-5', '2018-5-6', '2018-5-7']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);
    myChart2.setOption(option2);
    myChart3.setOption(option3);
    myChart4.setOption(option4);
</script>



